import { View } from "@tarojs/components";
import F2Canvas from "./Charts.jsx";
import { AtCard, AtList, AtListItem, AtMessage } from "taro-ui";
import { useState, useEffect } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import "./index.scss";
import { Chart } from "@antv/f2";

import { getOverViewDataApi, getWarnbyuserApi } from "../../utils/api";

let childRef;
const Index = () => {
  const [project_count, set_project_count] = useState(0);
  const [point_count, set_point_count] = useState(0);
  const [inspect_count, set_inspect_count] = useState(0);
  const [detect_count, set_detect_count] = useState(0);
  const [now_wran, set_now_wran] = useState({});
  const [chart_data, set_chart_data] = useState({});
  const [map, set_map] = useState({ 蚁情: "0%", 入侵: "0%", 低电: "0%" });

  const [warn_records, set_warn_records] = useState([]);

  useDidShow(async () => {
    const res = await getOverViewDataApi({});
    if (res.res === 0) {
      set_project_count(res.project_count);
      set_point_count(res.point_count);
      set_inspect_count(res.inspect_count);
      set_detect_count(res.detect_count);
      set_now_wran(res.warns_count);
      set_chart_data(res.warn_his_count);
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  });

  useDidShow(async () => {
    const res = await getWarnbyuserApi({
      warn_type: "0",
      confirm_res: "0",
      get_count: 1000,
      start_index: 0
    });
    if (res.res === 0) {
      set_warn_records(res.records);
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  });

  useEffect(() => {
    const sum =
      (chart_data[3] || 0) + (chart_data[4] || 0) + (chart_data[5] || 0);
    set_map({
      蚁情: sum ? Math.round(((chart_data[3] || 0) / sum) * 100) + "%" : "0%",
      入侵: sum ? Math.round(((chart_data[4] || 0) / sum) * 100) + "%" : "0%",
      低电: sum ? Math.round(((chart_data[5] || 0) / sum) * 100) + "%" : "0%"
    });
    // initChart();
    childRef.onWxCanvas();
  }, [chart_data]);

  const data = [
    {
      name: "蚁情",
      percent: chart_data[3] || 0,
      a: "1"
    },
    {
      name: "入侵",
      percent: chart_data[4] || 0,
      a: "1"
    },
    {
      name: "低电",
      percent: chart_data[5] || 0,
      a: "1"
    }
  ];
  const initChart = config => {
    // ⚠️ 别忘了这行
    // 为了兼容微信小程序，你需要通过这个命令为F2打补丁
    //   fixF2(F2);
    const chart = new Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [10, "auto", "auto"]
      })
    );
    //   chart.clear();

    chart.source(data, {
      percent: {
        formatter: function formatter(val) {
          return val * 100 + "%";
        }
      }
    });
    chart.legend({
      position: "right",
      itemFormatter: function itemFormatter(val) {
        return val + "  " + map[val];
      }
    });

    chart.tooltip(false);
    chart.coord("polar", {
      transposed: true,
      radius: 0.85
    });
    chart.axis(false);
    chart
      .interval()
      .position("a*percent")
      .color("name", ["#b84412", "#E6A23C", "#409EFF", "#F04864", "#8543E0"])
      .adjust("stack")
      .style({
        lineWidth: 1,
        stroke: "#fff",
        lineJoin: "round",
        lineCap: "round"
      })
      .animate({
        appear: {
          duration: 1200,
          easing: "bounceOut"
        }
      });

    chart.render();
    // 一定要返回chart实例哦
    return chart;
  };
  const toWarn = () => {
    Taro.switchTab({
      url: "/pages/monitor/index"
    });
  };
  const onRef = ref => {
    childRef = ref;
  };
  return (
    <View className="index-wrap">
      <View className="row">
        <View className="col">
          <View className="num">{project_count}</View>
          <View className="title">工程总数</View>
        </View>
        <View className="col">
          <View className="num">{point_count}</View>
          <View className="title">布点总数</View>
        </View>
        <View className="col">
          <View className="num">{detect_count}</View>
          <View className="title">探测总数</View>
        </View>
        <View className="col">
          <View className="num">{inspect_count}</View>
          <View className="title">检查总数</View>
        </View>
      </View>
      <View className="at-article__h2">当前报警</View>
      <AtCard>
        <AtList>
          <AtListItem
            title="蚁情"
            arrow="right"
            extraText={now_wran[3] || 0}
            className={now_wran[3] ? "not0" : ""}
            onClick={toWarn}
          />
          <AtListItem
            title="入侵"
            arrow="right"
            extraText={now_wran[4] || 0}
            className={now_wran[4] ? "not0" : ""}
            onClick={toWarn}
          />
          <AtListItem
            title="低电"
            arrow="right"
            extraText={now_wran[5] || 0}
            className={now_wran[5] ? "not0" : ""}
            onClick={toWarn}
          />
        </AtList>
      </AtCard>
      <View className="at-article__h2">历史报警</View>
      <F2Canvas
        id="chart-id"
        style={{ width: "100%", height: "200px" }}
        onInit={initChart}
        onRef={onRef}
      />
      <View className="at-article__h2">报警记录</View>
      <AtCard>
        <AtList>
          {warn_records.map(item => {
            return <AtListItem title={item.point_name} arrow="right" />;
          })}
        </AtList>
      </AtCard>
      <AtMessage />
    </View>
  );
};

export default Index;
